// ######################## 发送请求，获取班级概况数据 #########################
axios.get('/student/overview').then(result => {
  // console.log(result);
  let { code, message, data: { total, avgSalary, avgAge, proportion } } = result.data;
  // 找到页面元素，设置text文本值
  if (code === 0) {
    $('.total').text(total);
    $('.avgSalary').text(avgSalary);
    $('.avgAge').text(avgAge);
    $('.proportion').text(proportion);
  }
});



// ######################## 柱状图数据处理 #########################
// 1. 点击 三个点 ，切换 列表的显示和隐藏
$('.bar .btn').on('click', function () {
  $('#batch').toggle(); // toggle() 有自动判断的功能，如果元素是显示的则让其隐藏；如果元素的隐藏的则让其显示
  // toggleClass()
  // slideToggle()
  // fadeToggle()
})

// 2. 点击 li，获取对应的成绩
$('#batch > li').on('click', function () {
  let index = $(this).index(); // index() 是jQuery的封装的方法。得到当前li在兄弟之间的位置
  let batch = index + 1; // 因为index从0开始，考试次数从1开始的
  // 调用接口，获取成绩
  axios.get('/score/batch', { params: { batch } }).then(result => {
    // console.log(result);
    // 当得到响应结果后，把数据传入到 barChart 函数中
    if (result.data.code === 0) {
      barChart(result.data.data);
    }
  })
})

// 3. 页面刷新后，触发一下 第1个 li 的单击事件
$('#batch > li').eq(0).trigger('click');


// haahahhaahhahahahahaah
// ----------------------- 1. 饼图 ------------------------------
function pieChart() {
  let myChart = echarts.init($('.pie')[0]); // $('.pie') 是jQuery对象；加 [0] 把它转为DOM对象
  let option = {
    // 标题
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 鼠标移入的提示
    tooltip: {
      // {a} 是 series[0].name ，系列名称
      // {b} 是 series[0].data.name ，每一项的名称
      // {c} 是 数值
      // {d} 是 百分比
      formatter: '{a} <br /> {b} <strong>{c}</strong>人 占比{d}%'
    },
    // 系列数据
    series: [
      {
        name: '各地人员分布', // 和提示有关系
        type: 'pie', // 表示这是饼图（line表示折线图、bar表示柱状图）
        labelLine:{
          length:5,
          length2:3
        },
        radius: ['10%', '60%'], // 半径，一个表示饼图的内圈半径；一个表示外圈半径
        center: ['50%', '50%'], // 圆心点坐标
        // roseType 怎样表示数据，可选值有 area 和 radius
        // area 使用半径的长短表示数据的大小；每个扇形的圆心角相同
        // radius 使用半径的长短表示数据的大小；每个扇形的圆心角表示百分比
        roseType: 'area',
        // itemStyle 每一项的样式
        itemStyle: {
          borderRadius: 4
        },
        data: [
          { value: 40, name: '河北省' },
          { value: 20, name: '山东省' },
          { value: 32, name: '河南省' },
          { value: 30, name: '山西省' },
          { value: 28, name: '内蒙古' },
          { value: 26, name: '辽宁省' },
          { value: 22, name: '吉林省' },
          { value: 18, name: '黑龙江' }
        ]
      }
    ]
  };
  myChart.setOption(option);
}

pieChart();






// ----------------------- 2. 折线图 ----------------------------
function lineChart() {
  let myChart = echarts.init($('.line')[0]);
  let option = {
    // 图例
    legend: {
      top: 20
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    // 标题
    title: {
      // left: 'center',
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    // X轴设置
    xAxis: {
      type: 'category',
      boundaryGap: false, // 坐标轴两侧的留白策略。false表示不留白
      data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
    },
    // Y轴
    yAxis: {
      type: 'value',
      // 我们目前的数据，最大值是 17000 
      // 坐标轴最大值 = 数据最大值 + 数据最大值 * 50%
      boundaryGap: [0, '50%'], // Y轴方向上，坐标轴延伸的值
    },
    // 数据缩放组件（三种类型，通过type来指定类型）
    // type: inside（内部、数据缩放组件集成到了X轴上，通过鼠标滚轮来缩放）
    // type: select（选择、配合工具箱使用，通过工具选框来进行缩放）
    // type: slider（滑块、单独出现一个滑块，通过滑块进行数据的缩放） -- 默认
    dataZoom: [
      {
        type: 'slider', // 这里没有type，默认是 slider 类型
        start: 0, // 起始点 百分比
        end: 15 // 结束点 百分比
      }
    ],
    // 系列数据
    series: [
      {
        name: '期望薪资',
        type: 'line', // 表示是折线图
        smooth: true, // 使用平滑曲线
        symbol: 'none', // 表示线上的标志
        // 每一项的样式
        itemStyle: {
          color: '#ee6666'
        },
        // areaStyle: {},
        // 折线使用的数据
        data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
      },
      {
        name: '实际薪资',
        type: 'line', // 表示是折线图
        smooth: true, // 使用平滑曲线
        symbol: 'none', // 表示线上的标志
        // 每一项的样式
        itemStyle: {
          color: '#5470c6'
        },
        // areaStyle: {},
        // 折线使用的数据
        data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
      }
    ]
  };

  myChart.setOption(option);
}

lineChart();









// ----------------------- 3. 柱状图 ----------------------------
function barChart({ avgScore, group, lt60, gt60, gt80 }) {
  let myChart = echarts.init($('.barChart')[0]);
  let option = {
    // 网格的调整（指的是整个图表区域的大小调整）
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 触发方式。axis表示轴触发，鼠标放到柱子上方即可触发；item表示每一项，鼠标放到每个柱子上才能触发
      axisPointer: { // 横向的虚线
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 图例
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    // X轴配置
    xAxis: [
      {
        type: 'category',
        data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
        axisPointer: {
          type: 'shadow' // 4个柱子后的阴影
        }
      }
    ],
    // Y轴配置
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10, // 步长。间隔。
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    // 系列数据
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: 15,
        data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78]
      },
      {
        name: '不及格人数',
        type: 'bar',
        barWidth: 15,
        // 因为有两个Y轴，第一个Y轴的索引是0，第二个Y轴索引是1。
        // 这里的1表示我们使用第二个Y轴
        yAxisIndex: 1,
        data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2]
      },
      {
        name: '60~80分之间',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
      },
      {
        name: '高于80分',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
      }
    ]
  };
  myChart.setOption(option);
}

barChart();














// ----------------------- 4. 地图 ------------------------------
function mapChart() {
  let myChart = echarts.init($('.map')[0]);

  var chinaGeoCoordMap = {
    '黑龙江': [127.9688, 45.368],
    '内蒙古': [110.3467, 41.4899],
    "吉林": [125.8154, 44.2584],
    '北京市': [116.4551, 40.2539],
    "辽宁": [123.1238, 42.1216],
    "河北": [114.4995, 38.1006],
    "天津": [117.4219, 39.4189],
    "山西": [112.3352, 37.9413],
    "陕西": [109.1162, 34.2004],
    "甘肃": [103.5901, 36.3043],
    "宁夏": [106.3586, 38.1775],
    "青海": [101.4038, 36.8207],
    "新疆": [87.9236, 43.5883],
    "西藏": [91.11, 29.97],
    "四川": [103.9526, 30.7617],
    "重庆": [108.384366, 30.439702],
    "山东": [117.1582, 36.8701],
    "河南": [113.4668, 34.6234],
    "江苏": [118.8062, 31.9208],
    "安徽": [117.29, 32.0581],
    "湖北": [114.3896, 30.6628],
    "浙江": [119.5313, 29.8773],
    "福建": [119.4543, 25.9222],
    "江西": [116.0046, 28.6633],
    "湖南": [113.0823, 28.2568],
    "贵州": [106.6992, 26.7682],
    "云南": [102.9199, 25.4663],
    "广东": [113.12244, 23.009505],
    "广西": [108.479, 23.1152],
    "海南": [110.3893, 19.8516],
    '上海': [121.4648, 31.2891]
  };
  var chinaDatas = [
    [{
      name: '黑龙江',
      value: 0
    }], [{
      name: '内蒙古',
      value: 0
    }], [{
      name: '吉林',
      value: 0
    }], [{
      name: '辽宁',
      value: 0
    }], [{
      name: '河北',
      value: 0
    }], [{
      name: '天津',
      value: 0
    }], [{
      name: '山西',
      value: 0
    }], [{
      name: '陕西',
      value: 0
    }], [{
      name: '甘肃',
      value: 0
    }], [{
      name: '宁夏',
      value: 0
    }], [{
      name: '青海',
      value: 0
    }], [{
      name: '新疆',
      value: 0
    }], [{
      name: '西藏',
      value: 0
    }], [{
      name: '四川',
      value: 0
    }], [{
      name: '重庆',
      value: 0
    }], [{
      name: '山东',
      value: 0
    }], [{
      name: '河南',
      value: 0
    }], [{
      name: '江苏',
      value: 0
    }], [{
      name: '安徽',
      value: 0
    }], [{
      name: '湖北',
      value: 0
    }], [{
      name: '浙江',
      value: 0
    }], [{
      name: '福建',
      value: 0
    }], [{
      name: '江西',
      value: 0
    }], [{
      name: '湖南',
      value: 0
    }], [{
      name: '贵州',
      value: 0
    }], [{
      name: '广西',
      value: 0
    }], [{
      name: '海南',
      value: 0
    }], [{
      name: '上海',
      value: 1
    }]
  ];

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539];
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['北京市', chinaDatas]].forEach(function (item, i) {
    console.log(item)
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: .3 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: "#0f0"
            }
          },
          emphasis: {
            show: true,
            color: "#f60"
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  // 
  let option = {
    // 标题
    title: {
      // left: 'center',
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        return res;
      }
    },
    backgroundColor: "#fff",
    visualMap: { // 图例值控制（官方叫做视觉映射组件）
      min: 0,
      max: 1,
      calculable: true,
      show: false,
      color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: 'rgba(51, 69, 89, .5)', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };

  myChart.setOption(option);
}

mapChart();
